<template>
  <div class="afterInvest-page app-container">
    <div class="container">
      <div class="container-header">
        <div class="left">
          <div class="title">子投资分类</div>
          <el-form ref="dataForm" :inline="true" label-width="80px" :model="dataForm">
            <el-form-item label="" prop="compositionName">
              <el-input v-model="dataForm.compositionName" @keyup.enter.native="getList" size="small" clearable placeholder="请输入所属投资名称" style="width: 260px;"></el-input>
            </el-form-item>
            <el-form-item label="" prop="classifyName">
              <el-input v-model="dataForm.classifyName" @keyup.enter.native="getList" size="small" clearable placeholder="请输入子投资分类名称" style="width: 260px;"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 20px">
              <el-button class="bg-green" size="small" @click="getList">查询</el-button>
              <el-button size="small" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <p v-if="list[0]&&list[0].investIncomeTotalVo" class="tip">
        总资产金额：<span>{{list[0].investIncomeTotalVo.investMoneyTotal}}</span> 元
        <span style="padding-left: 40px;">
        </span> 总收益：<span :class="list[0].investIncomeTotalVo.investIncomeTotal>=0?'positiveFc':'negativeFc'">{{list[0].investIncomeTotalVo.investIncomeTotal}}</span> 元
        <span style="padding-left: 40px;">
        </span> 总收益率：<span  :class="list[0].investIncomeTotalVo.investIncomeRateTotal>=0?'positiveFc':'negativeFc'">{{list[0].investIncomeTotalVo.investIncomeRateTotal}}%</span>
      </p>
      <el-table
        ref="multipleTable"
        :data="list"
        stripe
        fit
        size="mini"
        @sort-change="sortChange"
        :header-cell-style="{color:'#333'}"
        style="width: 100%;">
        <el-table-column prop="classifyId" label="编号" align="left" width="80" sortable="custom" fixed></el-table-column>
        <el-table-column prop="classfyName" label="子投资分类名称" min-width="180" sortable="custom" fixed show-overflow-tooltip>
          <template slot-scope="{row}">
            <span v-if="row.hasNetWorth" style="color: rgb(79, 149, 221);cursor: pointer;" @click="detailsHandle(row.classifyId)">{{ row&&row.classfyName }}</span>
            <span v-else style="color: #999;cursor: pointer;" @click="$message('该子投资下无净值')">{{ row&&row.classfyName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="compositionName" label="所属投资" min-width="100" sortable="custom" fixed show-overflow-tooltip></el-table-column>
        <el-table-column prop="netWorthTime" label="净值日期" min-width="100" show-overflow-tooltip align="center" sortable="custom">
          <template slot-scope="{row}">
            <span>{{row.netWorthTime | parseTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="netWorthValue" label="单位净值" align="center" min-width="100" sortable="custom" show-overflow-tooltip></el-table-column>
        <el-table-column prop="netWorthValue" label="累计净值" align="center" min-width="100" sortable="custom" show-overflow-tooltip></el-table-column>
        <el-table-column prop="investManageEquity" label="资产金额(万元)" align="center" min-width="130" sortable="custom"></el-table-column>
        <el-table-column prop="investManageShare" label="资产份额(份)" align="center" min-width="130" sortable="custom" show-overflow-tooltip></el-table-column>
        <el-table-column prop="incomeRate" label="收益率" align="center" min-width="90" sortable="custom">
          <template slot-scope="scope">
            <span v-if="scope.row.incomeRate || scope.row.incomeRate==0" :class="scope.row.incomeRate>=0?'positiveFc':'negativeFc'">{{ scope.row.incomeRate }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="incomeRateToday" label="当日收益率" align="center" min-width="120" sortable="custom">
          <template slot-scope="scope">
            <span v-if="scope.row.incomeRateToday || scope.row.incomeRateToday==0" :class="scope.row.incomeRateToday>=0?'positiveFc':'negativeFc'">{{ scope.row.incomeRateToday }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="incomeRateThisWeek" label="近1周收益率" align="center" min-width="125" sortable="custom">
          <template slot-scope="{row}">
            <span v-if="row.incomeRateThisWeek || row.incomeRateThisWeek==0"
            :class="row.incomeRate>=0?'positiveFc':'negativeFc'">{{ row.incomeRateThisWeek }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="incomeRateMonth" label="近1月收益率" align="center" min-width="125" sortable="custom">
          <template slot-scope="{row}">
            <span v-if="row.incomeRateMonth || row.incomeRateMonth==0"
            :class="row.incomeRate>=0?'positiveFc':'negativeFc'">{{ row.incomeRateMonth }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="incomeRateHalfYear" label="近6月收益率" align="center" min-width="125" sortable="custom">
          <template slot-scope="{row}">
            <span v-if="row.incomeRateHalfYear || row.incomeRateHalfYear==0"
            :class="row.incomeRateHalfYear>=0?'positiveFc':'negativeFc'">{{ row.incomeRateHalfYear }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="incomeRateYear" label="近1年收益率" align="center" min-width="125" sortable="custom">
          <template slot-scope="{row}">
            <span v-if="row.incomeRateYear || row.incomeRateYear==0"
            :class="row.incomeRateYear>=0?'positiveFc':'negativeFc'">{{ row.incomeRateYear }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建日期" min-width="100" show-overflow-tooltip align="center" sortable="custom">
          <template slot-scope="{row}">
            <span>{{row.createdTime | parseTime}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="80" align="center" fixed="right">
          <template slot-scope="{row}">
            <el-button class="filter-item" size="mini" @click="relationHandle(row.classifyId)">子投资</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="getList" />

      <enternetValueOpen ref="enternetValueOpen" v-if="hasEnternetValueOpen" @closeOpen="getList"></enternetValueOpen>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { findAllManageClassifys } from '@/api/subInvestClassify'
import { rmoney } from '@/utils'
import Pagination from '@/components/Pagination'
import enternetValueOpen from './relation/enternetValueOpen.vue'

export default {
  name: 'SubInvestClassify',
  components: { Pagination, enternetValueOpen },
  data() {
    return {
      dataForm: {},
      total: 0,
      listQuery: {
        pageCurrent: 1,
        limit: 20
      },
      orderByInfo: {},
      relationOpneVisible: false,
      addOrUpdateVisible: false,
      list: [],

      hasEnternetValueOpen: false,
      rmoney: Function
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  watch: {
    '$route.query.refresh': {
      handler() {
        this.getList()
      }
    }
  },
  created() {
    if(this.$route.query.groupId) {
      this.dataForm.groupId = this.$route.query.groupId
      this.dataForm.groupName = this.$route.query.groupName
    }
    this.getList()
    this.rmoney = rmoney
  },
  methods: {
    sortChange(column) {
      if (!column.order) {
        this.orderByInfo = {}
      } else {
        this.orderByInfo = {
          [column.prop]: column.order == 'ascending' ? 'asc' : 'desc',
        }
      }
      this.getList()
    },
    enternetValueHandle(row) {
      if(row.investAccount) {
        this.$message({
          type: 'warning',
          message: '该策略已自动同步，无需手动录入'
        })
      }else if(!row.enableNetWorth) {
        this.$message({
          type: 'warning',
          message: '有子投资存在，请在子投资中录入净值'
        })
      }else {
        this.hasEnternetValueOpen = true
        this.$nextTick(() => {
          this.$refs.enternetValueOpen.init(row.strategyId, row.id, row.investId)
        })
      }
    },
    relationHandle(classifyId) {
      this.$router.push({
        path: '/afterManage/subInvest',
        query: {
          classifyId
        }
      })
    },
    detailsHandle(id) {
      this.$router.push({
        path: `/afterManage/subInvestClassify/details/${id}`
      })
    },
    resetForm() {
      // history.pushState('a', null, '/') // 重置url?后搜索条件
      this.$refs.dataForm.resetFields()
      this.dataForm = {}
      this.getList()
    },
    getList() {
      findAllManageClassifys({
        userId: this.userId,
        orderByInfo: this.orderByInfo,
        ...this.dataForm,
        ...this.listQuery,
        investManageType: 2
      }).then(res => {
        this.list = res.body.list
        this.total = res.body.total
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.afterInvest-page {
  .tip {
    margin-top: 10px;
    padding-bottom: 6px;
    text-align: right;
  }
  .el-icon-arrow-down {
    border: 1px solid rgb(79, 149, 221);
    padding: 1px 0;
    cursor: pointer;
    margin-right: 4px;
    color: rgb(79, 149, 221);
  }
  // ::v-deep .el-icon-sort {
  //   transform: rotate(90deg);
  // }
}
</style>>
